<template>
  <div class="touch-table">
    <el-table
            :data="touchData"
            show-summary
            :summary-method="getSummaries"
            style="width: 100%">
      <el-table-column
              prop="area"
              label=""
              width="75">
      </el-table-column>
      <el-table-column
              prop="touch"
              label="触球"
              sortable
              width="120">
      </el-table-column>
      <el-table-column
              prop="touchSuccessful"
              label="成功触球"
              sortable
              width="120">
      </el-table-column>
      <el-table-column
              prop="fetalError"
              label="致命失误"
              sortable
              width="120">
      </el-table-column>
      <el-table-column
              prop="fouled"
              label="被犯规"
              sortable
              width="120">
      </el-table-column>
      <el-table-column
              prop="intercepted"
              label="被抢断"
              sortable
              width="120">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "TouchTable",
    data(){
      return {
        touchData:[
          {area:'禁区内',touch:10,touchSuccessful:5,fetalError:12,fouled:15,intercepted:20},
          {area:'进攻三区',touch:10,touchSuccessful:5,fetalError:12,fouled:15,intercepted:20},
          {area:'中场三区',touch:10,touchSuccessful:10,fetalError:12,fouled:17,intercepted:20},
          {area:'防守三区',touch:10,touchSuccessful:5,fetalError:15,fouled:15,intercepted:20},
        ]
      }
    },
    methods:{
      //合计规则函数
      getSummaries(param){
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column,index)=>{
          const values = data.map((item) =>{
            return item[column.property]
          });
          if (index === 0) {
            sums[index] = '合计';
          } else {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            },0);
          }
        });
        return sums
      },
    }
  }
</script>

<style scoped>
  .touch-table {
    width: 100%;
    height: 190px;
    color:#656F73;
    background-color: blue;
  }
  .el-table {
    /*margin-top: 5px;*/
    /*border-color: red;*/
    font-size: 13px;
    /*line-height: 10px;*/
    background-color: #B500FE;
    /*font-weight: bold;*/
  }
  .touch-table /deep/ .el-table td {
    padding: 6px 0;
    background-color: #f1f6f9;
    text-align: center;
  }
  .touch-table /deep/ .is-leaf {
    padding: 5px 0 ;
    background-color: #f1f6f9;
    text-align: center;
  }

</style>